<template>
  <div class="box">
    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside width="15vw" style="background: #3780ba">
        <div id="one">
          <img :src="meunLogo" />
        </div>
        <el-menu forceRender
          active-text-color="#fff"
          background-color="#3780B9"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          unique-opened
          :router="true"
        >
          <template v-for="item in asideMenu.menu">
            <!-- 两级菜单 -->
            <template v-if="1===1">
              <el-sub-menu :index="item.fname" :key="item.fname">
                <!-- 一级菜单标题 -->
                <template #title>
                  <el-icon style="margin-right:15px">
                    <document />
                    <img v-if="item.fid == 1" style=" height: 1.2rem; padding: 0.3rem 0.6rem;  vertical-align: middle;"
                      :src="vehiclefiling" alt=""/>
                  </el-icon>
                  <span>{{ item.fname }}</span>
                </template>
              <!-- 二级菜单标题 -->
              <template v-for="subItem in item.childList" :key="subItem.index">
                  <el-menu-item :index="subItem.index">{{ subItem.fname }}</el-menu-item>
                </template>
        </el-sub-menu>
      </template>
    </template>
  </el-menu>
  <div id="three">
      <div id="two">
  <div ><img :src="bmLogo" /></div>
  <div style="font-size:1.2rem;font-weight:bold;margin-left:10px;margin-top:-8px;"><span>华晨宝马</span><br/><span>{{factory_name}}</span></div>
 <!-- <div><span style="font-size:1.2rem;font-weight:bold;margin-left:10px">{{factory_name}}</span></div>-->
</div>
</div>

</el-aside>

<el-container>
  <el-dialog v-model="changeable" width="30%" title="修改密码">
    <el-form ref="passwordChange" :model="access" :rules="rules" status-icon label-width="90px">
      <el-row>
        <el-form-item prop="oldpassword" label="旧密码">
          <div style="width: 210px;">
            <el-input v-model="access.oldpassword" placeholder="请输入" type="password" autocomplete="off" clearable />
          </div>
          <div style="margin-left: 10px;">
            <span style="font-size: 2px;color: #888;">请输入旧密码</span>
          </div>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="newpassword" label="新密码">
          <div style="width: 210px;">
            <el-input v-model="access.newpassword" placeholder="请输入" type="password" autocomplete="off" clearable />
          </div>
          <div style="margin-left: 10px;">
            <span style="font-size: 2px;color: #888;">请输入新密码</span>
          </div>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="newpassword2" label="新密码">
          <div style="width: 210px;">
            <el-input v-model="access.newpassword2" placeholder="请输入" type="password" autocomplete="off" clearable />
          </div>
          <div style="margin-left: 10px;">
            <span style="font-size: 2px;color: #888;">再次输入新密码</span>
          </div>
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button class="sele-but" type="primary" @click="save()">保存</el-button>
                <el-button class="empty-but" @click="revert()">取消</el-button>
            </span>
    </template>
  </el-dialog>
    <el-header style="padding: 0">
        <!-- 表头标签 -->
        <div class="tabs">
<!--            <div style="-->
<!--                float: left;-->
<!--                height: 100%;-->
<!--                width: 70%;-->
<!--                align-items: center;-->
<!--                display: flex;-->
<!--              ">-->
<!--                <el-tabs style="margin-left: 60px" v-model="newTab.tab" @tab-click="handleClick">-->
<!--                    <el-tab-pane v-for="item in tabs" :label="item.fname" :name="item.fid" :key="item.fid">-->
<!--                        <div slot="label" class="my-label" :class="newTab.tab === item.fid ? 'tab-active' : ''">-->
<!--                        </div>-->
<!--                    </el-tab-pane>-->
<!--                </el-tabs>-->
<!--            </div>-->
            <!-- 表头用户头像及编号 -->
            <div style="width: 20%; height: 100%; float: right" id="rightBox">
                <div class="avatar">
                    <div>
                        <el-avatar :src="require('@/assets/03b0d39583f48206768a7534e55bcpng.png')" />
                    </div>
                </div>
                <div class="Percode">
                    <el-dropdown :hide-on-click="false">
                        <span class="el-dropdown-link">
                          {{usernumber}}<el-icon class="el-icon--right">
                            <arrow-down />
                          </el-icon>
                        </span>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item @click="changePassword()">修改密码</el-dropdown-item>
                            <el-dropdown-item @click="exitLogin()">退出登录</el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </el-header>
    <!-- 主体模块：标签页 + 当前路由内容 -->
    <el-main style="width: 100%;margin-top:-10px">
        <router-view style="height: 90vh;background:#fff;overflow-y:auto" />
    </el-main>
</el-container>
</el-container>
</div>
</template>
<script setup lang="ts">
    import { reactive,ref } from "vue";
    import { TabsPaneContext,ElMessage,ElMessageBox} from "element-plus";
    import meunLogo from "@/assets/meunLogo.png";
    import bmLogo from "@/assets/bmLogo.png";
    import { useRouter } from "vue-router";
    import {getType,getTreeStructure} from "@/api/menu";
    import md5 from 'js-md5';
    import {updateUserInfo} from "@/api/role";
    const router = useRouter();
    //当前工厂
    const factory_name = localStorage.getItem("factory_name");
    let access = reactive({
      oldpassword:"",
      newpassword:"",
      newpassword2:"",
    })
    const validatePassword =() =>{
      return (rule,value,callback)=>{
        if(!value){
          callback(new Error("请填写旧密码."))
        }else if(access.oldpassword!==localStorage.getItem("pwd")){
          callback(new Error("密码输入错误."))
        }else{
          callback();
        }
      }
    }
    const validatePassword2 =() =>{
      return (rule,value,callback)=>{
        if(!value){
          callback(new Error("请填写新密码."))
        }else if(access.newpassword!==access.newpassword2){
          callback(new Error("两次输入的密码不一致."))
        }else{
          callback();
        }
      }
    }
    const rules = {
      oldpassword:[{required: true,validator:validatePassword(),trigger: "blur"}],
      newpassword:[{required:true,message:"密码不能为空",trigger:"blur"}],
      newpassword2:[{required:true,validator:validatePassword2(),trigger:"blur"}]
    };
    const usernumber = localStorage.getItem("number");
    let newTab = reactive({tab:1});
    // 左侧菜单栏
    let asideMenu = reactive({
        name:'',
        menu:[]
    });
    let user = JSON.parse(localStorage.getItem("user"));
    getTreeStructure({roleId:user.user_role}).then((res:any)=>{
        asideMenu.menu = res;
    });
    let passwordChange = ref();
    const save = ()=>{
      passwordChange.value.validate(valid=> {
        if(valid){
          let password = md5(access.newpassword)
          let userinfo = {uid:user.uid,userpwd:password};
          updateUserInfo(userinfo).then(res=>{
            if(res.code==200){
              localStorage.setItem("pwd",access.newpassword);
              ElMessage.success("修改成功.");
              revert();
            }else{
              ElMessage.error("修改失败.");
            }
          })
        }
      })
    }
    // 侧边菜单打开关闭
    const handleOpen = (key, keyPath) => {
        console.log(key, keyPath);
    };
    const handleClose = (key, keyPath) => {
        console.log(key, keyPath);
    };
    let changeable = ref(false);
    const changePassword = ()=>{
      changeable.value = true;
    }
    const revert=()=>{
      access.oldpassword = "";
      access.newpassword = "";
      access.newpassword2 = "";
      changeable.value = false;
    }

    // 首次进入选中的名称
    const activeName = reactive({tab:1});
    // tabs循环数据
    let tabs = [
      {
        fid: 1,
        fname: "视频监控",
        value: "first",
    }, {
        fid: 2,
        fname: "移动污染",
        value: "second",
    }, {
        fid: 3,
        fname: "企业环保",
        value: "third",
    }, {
        fid: 4,
        fname: "账号管理",
        value: "four",
    },
    ];

    const handleClick = (tab, event) => {
       newTab.tab = tab.props.name;
       console.log(newTab)
    };

    //退出登陆
    const exitLogin = () => {
        ElMessageBox.confirm("真的要退出登录吗?", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                localStorage.setItem("user",null);
                localStorage.setItem("id",null);
                localStorage.setItem("roleId",null);
                localStorage.setItem("factoryId",null);
                localStorage.setItem("number",null);
                localStorage.setItem("pwd",null);
                localStorage.setItem("token",null);
                localStorage.setItem("userObj",null);
                router.push("/");
            })
            .catch(() => {
                //取消：就不做任何提示了
            });
    };
</script>
<style scoped>
    .box {
        background: #f2f4f5;
        height: 100vh;
    }

    #one {
      width: 100%;
      padding: 30px 0;
      color: #fff;
      text-align: center;
    }
    #one img{
      width: 80%;
      height: 60px;
      line-height:60px;
      margin: 6% ;
    }

    #two{
      width: 100%;
      /*padding: 30px 0;*/
      color: #fff;
      text-align: center;
      display:flex;
      align-items: center;
      justify-content: flex-start;
      margin-left:3%
    }
    #two img{
      width: 50px;
      height: 50px;
      line-height:50px;
      /*margin: 10% 12%;*/
    }
    #three {
      position: absolute;
      top: 90%;
      left: 10px;
      width: 400px;
      height: 100px;
    }
    ::v-deep .el-sub-menu__title span{
      font-size:19px
    }
    .el-menu-item {
      color: #fff;
      font-size:15px;
    }
    .el-menu-item.is-active {
      color: #fff;
      font-size:15px;
      font-weight:800
    }
    .el-menu-vertical-demo{
      width:102%
    }
    .menu {
        background: #3780ba;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
        height: 500px;
    }

    .tabs {
        width: 100%;
        height: 100%;
        background: #fff;
    }

    .avatar {
        width: 30%;
        clear: both;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .avatar>div {
        flex: 1;
        text-align: center;
    }

    .avatar>div:not(:last-child) {
        border-right: 1px solid var(--el-border-color);
    }

    .Percode {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .example-showcase .el-dropdown+.el-dropdown {
        margin-left: 15px;
    }

    .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }

    .el-aside {
        overflow-x: hidden;
        height: 100vh;
    }

    .el-sub-menu .el-menu-item {
        padding-left: 60px !important;
    }

    #rightBox {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    /* 标签样式更改 */
    /* 去掉el-tab-pane底部灰色线条 */
    ::v-deep .el-tabs__nav-wrap::after {
        height: 0 !important;
    }

    ::v-deep .el-tabs__item {
        color: #888;
    }

    ::v-deep .el-tabs__active-bar {
        background-color: #3780b9;
    }

    ::v-deep .el-tabs__item.is-active {
        color: #000;
    }
    /* 内部header */
    .inside-header {
        height: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    /* 内部main */
    .inside-main {
        width: 100%;
        height: 100%;
        /* background: #fff; */
        /* align-items: center; */
    }
    /* 空心按钮样式 */
    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */
    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
